<template>
  <div>
    <div class="doumee-filter">
      <el-form inline @submit.native.prevent>
        <el-form-item label="模板名称:">
          <el-input
            v-model="filters.keyword"
            placeholder="请输入模板名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态:">
          <el-select
            v-model="filters.status"
            placeholder="请选择设备状态"
            clearable
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            v-preventReClick
            type="primary"
            @click="getList(1)"
          >查找</el-button>
          <el-button v-preventReClick @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      v-if="meta.indexOf('deviceTicketTemplateAdd') > -1"
      class="doumee-filter"
    >
      <el-button
        v-preventReClick
        type="primary"
        @click="addBtn"
      >新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="模板名称"
        prop="name"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="关联自助机数量"
        prop="num"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="排序码"
        prop="sortNo"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="状态" min-width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'1'"
            :inactive-value="'0'"
            :disabled="
              meta.indexOf('deviceTicketTemplateUpdateStatus') === -1 &&
                scope.row.num > 0 &&
                scope.row.status == 1
            "
            @change="toConfigUpdate($event, scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="150"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('deviceTicketTemplateUpdate') > -1"
              v-preventReClick
              type="text"
              @click="toEdit(scope.row)"
            >编辑</el-button>
            <!-- v-if="meta.indexOf('CoinsDel') > -1" -->
            <el-button
              v-if="
                meta.indexOf('deviceTicketTemplateDel') > -1 &&
                  (scope.row.num == 0 || scope.row.status == 0)
              "
              type="text"
              class="secondColor"
              @click="handleDeleteClick(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-dialog
      v-if="dialogTableVisible"
      :title="newPrinter.id ? '编辑' : '新增'"
      :visible.sync="dialogTableVisible"
      width="900px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form
        ref="newPrinter"
        class="doumee-form"
        :model="newPrinter"
        :rules="rules"
        label-suffix="："
        label-width="7em"
      >
        <div style="display: flex">
          <el-form-item label="模板名称" prop="name" style="flex: 2">
            <el-input v-model="newPrinter.name" placeholder="请输入模板名称" />
          </el-form-item>
          <el-form-item label="排序码" prop="sortNo" style="flex: 2">
            <el-input v-model="newPrinter.sortNo" placeholder="请输入排序码" />
          </el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            style="margin-left: 20px"
            @click="save"
          >保存</el-button>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="息屏海报" name="tab1">
            <el-form-item label="海报类型">
              <el-radio-group v-model="newPrinter.config['m_xphb'].type">
                <el-radio label="0">图片</el-radio>
                <el-radio label="1">视频</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="newPrinter.config['m_xphb'].type == 0"
              label="图片"
            >
              <div class="df_ac">
                <el-upload
                  class="device-uploader"
                  accept=".jpg,.png,.jpeg"
                  :action="uploadFileUrl"
                  :headers="headers"
                  :data="uploadParam"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <!-- <img style="width: 148px; height: 148px" src="@/assets/images/btn_uploadcard.png" alt=""> -->
                  <i
                    v-if="!newPrinter.config['m_xphb'].mainImgUrl"
                    class="el-icon-plus"
                    style="font-size: 28px"
                  />
                  <div
                    v-show="newPrinter.config['m_xphb'].mainImgUrl"
                    class="file"
                    :style="
                      'background-image: url(' +
                        newPrinter.config['m_xphb'].mainImgUrl +
                        ')'
                    "
                  >
                    <div class="delete">
                      <i
                        class="el-icon-delete icon"
                        @click.stop="deleteMainImg"
                      />
                    </div>
                  </div>
                </el-upload>
                <div>
                  <div class="h24">建议尺寸：1080*1920px</div>
                  <div class="placeholder9 h24">
                    支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              v-if="newPrinter.config['m_xphb'].type == 1"
              label="视频"
            >
              <div class="df_ac">
                <el-upload
                  accept="video"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :headers="headers"
                  show-file-list
                  :file-list="fileList1"
                  :on-success="handleAvatarSuccessb"
                  :on-remove="handleRemove"
                >
                  <!-- <img style="width: 148px; height: 148px" src="@/assets/images/btn_uploadcardb.png" alt=""> -->
                  <div class="scDiv">
                    <i class="el-icon-plus" style="font-size: 28px" />
                  </div>
                </el-upload>
              </div>
              <div class="h24">建议尺寸：1080*1920px</div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="底部背景" name="tab2">
            <el-form-item label="背景" label-width="5em">
              <div class="df_ac">
                <el-upload
                  class="device-uploader"
                  accept=".jpg,.png,.jpeg"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handlebgImgUrl"
                >
                  <!-- <img style="width: 148px; height: 148px" src="@/assets/images/btn_uploadcard.png" alt=""> -->
                  <i
                    v-if="!newPrinter.config['m_index_bg'].bgImgUrl"
                    class="el-icon-plus"
                    style="font-size: 28px"
                  />
                  <div
                    v-show="newPrinter.config['m_index_bg'].bgImgUrl"
                    class="file"
                    :style="
                      'background-image: url(' +
                        newPrinter.config['m_index_bg'].bgImgUrl +
                        ')'
                    "
                  >
                    <div class="delete">
                      <i
                        class="el-icon-delete icon"
                        @click.stop="delebgImgUrl"
                      />
                    </div>
                  </div>
                </el-upload>
                <div>
                  <div class="h24">建议图片尺寸为1080*100px</div>
                  <div class="placeholder9 h24">
                    支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="首页banner" name="tab3">
            <el-form-item label="banner">
              <el-upload
                :action="uploadFileUrl"
                accept=".jpg,.png,.jpeg"
                list-type="picture-card"
                :file-list="fileList2"
                :limit="3"
                :on-success="filesUploadSuccess"
                :on-remove="filesUploadRemove"
                name="file"
                :headers="headers"
                :data="uploadParam"
              >
                <i class="el-icon-plus" style="font-size: 28px" />
                <div slot="tip" class="el-upload__tip">
                  建议图片尺寸为960*420px，支持上传三张图片
                </div>
              </el-upload>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="功能入口" name="tab4">
            <el-form-item label="icon" label-width="5em">
              <div class="df_ac">
                <el-upload
                  class="device-uploader"
                  accept=".jpg,.png,.jpeg"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleFUNC"
                >
                  <i
                    v-if="
                      !(
                        newPrinter.config['m_func'] &&
                        newPrinter.config['m_func'].dataList &&
                        newPrinter.config['m_func'].dataList.length > 0 &&
                        newPrinter.config['m_func'].dataList[0].icon
                      )
                    "
                    class="el-icon-plus"
                    style="font-size: 28px"
                  />
                  <div
                    v-if="
                      newPrinter.config['m_func'] &&
                        newPrinter.config['m_func'].dataList &&
                        newPrinter.config['m_func'].dataList.length > 0 &&
                        newPrinter.config['m_func'].dataList[0].icon
                    "
                    class="file"
                    :style="
                      'background-image: url(' +
                        newPrinter.config['m_func'].dataList[0].icon +
                        ')'
                    "
                  >
                    <div class="delete">
                      <i class="el-icon-delete icon" @click.stop="delebgFUNC" />
                    </div>
                  </div>
                </el-upload>
                <div>
                  <div class="h24">建议图片尺寸为960*340px</div>
                  <div class="placeholder9 h24">
                    支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="息屏时间配置" name="tab5">
            <el-form-item label="息屏时间(秒)" label-width="8em">
              <el-input
                v-model="newPrinter.config['m_xp_time'].closeTime"
                placeholder="请输入息屏时间"
                class="w200"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              />
              <span
                class="tip-style"
              >0表示不允许息屏，1表示1s后无操作息屏，以此类推，建议设置为10s息屏</span>
            </el-form-item>
            <el-form-item label="返回时间(秒)" label-width="8em">
              <el-input
                v-model="newPrinter.config['m_xp_time'].backTime"
                placeholder="请输入返回时间"
                class="w200"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              />
              <span
                class="tip-style"
              >0表示不允许返回首页，1表示1s后无操作返回首页，以此类推，建议设置为10s返回首页</span>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="二维码配置" name="tab6">
            <el-form-item label="公众号二维码" label-width="8em">
              <div class="df_ac">
                <el-upload
                  class="device-uploader"
                  accept=".jpg,.png,.jpeg"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handlepublicImg"
                >
                  <i
                    v-if="!newPrinter.config['m_qrcode'].publicImgUrl"
                    class="el-icon-plus"
                    style="font-size: 28px"
                  />
                  <div
                    v-show="newPrinter.config['m_qrcode'].publicImgUrl"
                    class="file"
                    :style="
                      'background-image: url(' +
                        newPrinter.config['m_qrcode'].publicImgUrl +
                        ')'
                    "
                  >
                    <div class="delete">
                      <i
                        class="el-icon-delete icon"
                        @click.stop="delepublicImg"
                      />
                    </div>
                  </div>
                </el-upload>
                <div>
                  <div class="h24">上传的二维码图片尺寸比例为1:1</div>
                  <div class="placeholder9 h24">
                    支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="小程序二维码" label-width="8em">
              <div class="df_ac">
                <el-upload
                  class="device-uploader"
                  accept=".jpg,.png,.jpeg"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleminiImg"
                >
                  <i
                    v-if="!newPrinter.config['m_qrcode'].miniImgUrl"
                    class="el-icon-plus"
                    style="font-size: 28px"
                  />
                  <div
                    v-show="newPrinter.config['m_qrcode'].miniImgUrl"
                    class="file"
                    :style="
                      'background-image: url(' +
                        newPrinter.config['m_qrcode'].miniImgUrl +
                        ')'
                    "
                  >
                    <div class="delete">
                      <i
                        class="el-icon-delete icon"
                        @click.stop="deleminiImg"
                      />
                    </div>
                  </div>
                </el-upload>
                <div>
                  <div class="h24">上传的二维码图片尺寸比例为1:1</div>
                  <div class="placeholder9 h24">
                    支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="主题色配置" name="tab7">
            <el-form-item label="主色调" label-width="5em">
              <el-color-picker
                v-model="newPrinter.config['m_color'].mainColor"
              />
            </el-form-item>
            <el-form-item label="辅色调" label-width="5em">
              <el-color-picker
                v-model="newPrinter.config['m_color'].minorColor"
              />
            </el-form-item>
            <el-form-item label="背景色" label-width="5em">
              <el-color-picker v-model="newPrinter.config['m_color'].bgColor" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, delDevTemplate, updateDevTemplateStatus, devTemplateList, moduleList, addDevTemplate, devTemplateDetail, updateDevTemplate } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'DEV_TICKET_IMG'
      },
      headers: {
        shopId: localStorage.getItem('shopId') || 1,
        gymId: sessionStorage.getItem('venueId')
      },
      subLoading: false,
      active: '0',
      pagination: {
        page: 1,
        rows: 10
      },
      meta: [],
      dialogTableVisible: false,
      dialogCropperVisible: false,
      totalCount: 10,
      list: [],
      listLoading: false,
      stateList: [
        { value: '1', label: '启用' },
        { value: '0', label: '禁用' }
      ],
      activeName: 'tab1',
      filters: {},
      newPrinter: {},
      fileList1: [],
      fileList2: [],
      rules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_xphb'].mainImgUrl = res.showUrl
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    handleAvatarSuccessb(res, file) {
      this.fileList1 = [{
        name: res.insertUrl,
        url: res.showUrl
      }]
    },
    handleRemove(file, fileList) {
      this.fileList1 = []
    },
    deleteMainImg(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_xphb'].mainImgUrl = ''
      this.newPrinter = newPrinter
    },
    handlebgImgUrl(res, file) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_index_bg'].bgImgUrl = res.showUrl
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    delebgImgUrl(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_index_bg'].bgImgUrl = ''
      this.newPrinter = newPrinter
    },
    handleFUNC(res, file) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_func'].dataList[0].icon = res.showUrl
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    delebgFUNC(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_func'].dataList[0].icon = ''
      this.newPrinter = newPrinter
    },
    handlepublicImg(res, file) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_qrcode'].publicImgUrl = res.showUrl
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    delepublicImg(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_qrcode'].publicImgUrl = ''
      this.newPrinter = newPrinter
    },
    handleminiImg(res, file) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_qrcode'].miniImgUrl = res.showUrl
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    deleminiImg(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_qrcode'].miniImgUrl = ''
      this.newPrinter = newPrinter
    },
    // 场馆图片上传成功
    filesUploadSuccess(response, file, fileList) {
      const newPrinter = { ...this.newPrinter }
      newPrinter.config['m_index_banner'].bannerList = []
      const fileList2 = []
      this.newPrinter.venueImageList = []
      fileList.forEach((image) => {
        if (image.response) {
          newPrinter.config['m_index_banner'].bannerList.push(image.response.showUrl)
          fileList2.push({
            name: image.response.insertUrl,
            url: image.response.showUrl
          })
        } else {
          newPrinter.config['m_index_banner'].bannerList.push(image.url)
          fileList2.push({
            name: image.name,
            url: image.url
          })
        }
      })
      this.fileList2 = fileList2
      console.log(12312, this.fileList2)
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    // 场馆图片移除
    filesUploadRemove(file, fileList) {
      const newPrinter = { ...this.newPrinter }
      let fileList2 = [...this.fileList2]
      console.log(2233, this.fileList2)
      if (fileList.length === 0) {
        newPrinter.config['m_index_banner'].bannerList = []
        fileList2 = []
      } else {
        newPrinter.config['m_index_banner'].bannerList = []
        fileList2 = []
        fileList.forEach((obj) => {
          console.log(1231, obj)
          if (obj.response) {
            newPrinter.config['m_index_banner'].bannerList.push(obj.response.showUrl)
            fileList2.push({
              name: obj.response.insertUrl,
              url: obj.response.showUrl
            })
          } else {
            newPrinter.config['m_index_banner'].bannerList.push(obj.url)
            fileList2.push({
              name: obj.name,
              url: obj.url
            })
          }
        })
      }
      this.fileList2 = fileList2
      this.newPrinter = newPrinter
      this.$refs.newPrinter.clearValidate()
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    handleDeleteClick(item) {
      const that = this
      this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => { },
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          delDevTemplate({ param: { id: item.id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('删除成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => { })
    },
    toConfigUpdate(e, id, status) {
      this.listLoading = true
      updateDevTemplateStatus({ param: { id, status }}).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success('修改成功')
        }
        this.getList()
      }).catch(() => {
        this.listLoading = false
      })
    },
    addBtn() {
      moduleList({ param: {}}).then(res => {
        if (res.errorCode === '000000') {
          this.newPrinter = {
            config: {
              ...res.record
            }
          }
          this.fileList1 = []
          this.fileList2 = []
          this.activeName = 'tab1'
          this.dialogTableVisible = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    toEdit(item) {
      devTemplateDetail({ param: { id: item.id }}).then(res => {
        if (res.errorCode === '000000') {
          this.newPrinter = {
            ...res.record
          }
          this.fileList1 = []
          const fileList2 = []
          if (res.record.config['m_xphb'].type === '1') {
            this.fileList1 = [{
              name: res.record.config['m_xphb'].mainImgUrl,
              url: res.record.config['m_xphb'].mainImgUrl
            }]
          }
          const arr = res.record.config['m_index_banner'].bannerList || []
          arr.forEach(s => {
            fileList2.push({
              name: s,
              url: s
            })
          })
          this.fileList2 = fileList2
          this.activeName = 'tab1'
          this.dialogTableVisible = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getList(page) {
      this.meta = this.$route.meta.buttons || []
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      devTemplateList({ pagination, param: { venueId, ...filters }}).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.totalCount = res.totalCount
          this.$refs.table.doLayout()
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    clear() {
      this.filters = {}
      this.getList()
    },
    save() {
      this.$refs.newPrinter.validate((valid) => {
        if (valid) {
          const param = { ...this.newPrinter }
          if (param.config['m_xphb'].type === '1') {
            if (this.fileList1.length === 0) {
              return this.$message.info('请上传息屏视频')
            }
            param.config['m_xphb'].mainImgUrl = this.fileList1[0].url
          }
          this.subLoading = true
          if (param.id) {
            updateDevTemplate({ param }).then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.$message.success('编辑成功')
                this.getList()
                this.dialogTableVisible = false
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          } else {
            addDevTemplate({ param }).then(res => {
              // console.log(res)
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.$message.success('新增成功')
                this.getList()
                this.dialogTableVisible = false
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          }
        } else {
          // this.$alert('请先完善设备信息', '错误')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.input-style {
  display: flex;
}

.device-uploader {
  width: 148px;
  height: 148px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;

  &:hover {
    border-color: $menuActive;

    .uploader-icon {
      color: $menuActive;
    }
  }

  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;

        .icon {
          color: #fff;
        }
      }

      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }

  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.scDiv {
  width: 148px;
  height: 148px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-bottom: 20px;

  &:hover {
    border-color: $menuActive;

    .uploader-icon {
      color: $menuActive;
    }
  }
}
</style>
